import React from 'react';
import InfiniteScroll from 'react-infinite-scroller'; //下拉加载
import { Card, Image, Spin, Statistic, Result } from 'antd';
import { MehOutlined } from '@ant-design/icons';

function Waterfall(props) {

    const {
        data,
        containerRef,
        hasMore,
        loading,
        loadMoreData,
    } = props;

    if (!data.length) {
        return (
            <div style={{marginTop: 100}}>
                <Result
                    icon={<MehOutlined />}
                    title="没有相关图书 >_<"
                />
            </div>
        );
    }

    return (
        <Spin spinning={loading} tip="正在加载" wrapperClassName="spin-wrapper">
            <div className='pages_pinterest'>
                {/* 下拉加载 */}
                <InfiniteScroll
                    initialLoad={false} // 不让它进入直接加载
                    loadMore={loadMoreData}  // 触底加载更多
                    hasMore={hasMore} // 是否继续监听滚动事件 true 监听 | false 不再监听
                >
                    <div className="pages_hoc" ref={containerRef}>
                        {
                            data.map((item, index) => {
                                return (
                                    <Card
                                        hoverable
                                        key={index}
                                        className="imgBox"
                                        style={{width: 400}}
                                        cover={<Image src={item.url} />}
                                    >
                                        <Card.Meta
                                            title={(
                                                <div className="cardMeta-title">
                                                    <span>{item.bookName}</span>
                                                    <Statistic
                                                        value={item.price}
                                                        prefix="¥"
                                                        precision={2}
                                                        valueStyle={{ color: '#3f8600' }}
                                                    />
                                                </div>
                                            )}
                                            description={item.desc}
                                        />
                                    </Card>
                                )
                            })
                        }
                    </div>
                </InfiniteScroll>
            </div>
        </Spin>
    )
}

export default Waterfall;
